<template>
  <div>
    <div class="header">
      <span>{{title}}联邦学习本地模块</span>
      <span @click="handle4">{{ title }}</span>
    </div>
    <div class="main">
      <div class="left">
        <div class="state">
          <el-tag id="tag">{{state}}</el-tag>
          <el-progress :text-inside="true" :stroke-width="32" :percentage="percentage" id="progress"></el-progress>
        </div>
        <textarea id="text" class="console" v-model="textarea" readonly="readonly"></textarea>
      </div>
      <div class="right">
        <div class="hardware">
          <el-row style="margin-bottom: 1rem;font-size: 1.5rem;">硬件监控</el-row>
          <el-row style="margin-bottom: 1rem;">
            <el-col :span="12">
              CPU: <span style="color: blue">{{ cpu }}</span>
            </el-col>
            <el-col :span="12">
              RAM: <span style="color: blue">{{ ram }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              GPU: <span style="color: blue">{{ gpu }}</span>
            </el-col>
            <el-col :span="12">
              DISK: <span style="color: blue">{{ disk }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="version">
          <el-row style="margin-bottom: 1rem;font-size: 1.5rem;">
            <el-col :span="12">版本控制</el-col>
            <el-col :offset="3" :span="9"><el-button type="text" style="float: right;margin-right: 1rem;" @click="handle1">历史版本</el-button></el-col>
          </el-row>
          <el-row style="line-height: 3rem;">
            <el-col :span="12">
              版本: <span style="color: red">{{ version }}</span>
            </el-col>
            <el-col :span="12">
              时间: <span style="color: red">{{ time }}</span>
            </el-col>
          </el-row>
          <el-row style="line-height: 3rem;">
            <el-col :span="12">
              数据量: <span style="color: red">{{ data }}</span>
            </el-col>
            <el-col :span="12">
              操作:
              <el-button type="text" style="color: red;border: 1px solid;padding: 2px;margin-left:1rem;width: 3rem;" @click="run">Run</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="commit">
          <el-row style="margin-bottom: 1rem;font-size: 1.5rem;">
            <el-col :span="12">提交管理</el-col>
            <el-col :offset="3" :span="9"><el-button type="text" style="float: right;margin-right: 1rem;" @click="handle2">历史提交</el-button></el-col>
          </el-row>
          <div>
            <span class="fileTitle">文件名称：</span>
            <span class="fileContent">{{file}}</span>
          </div>
          <div>
            <span class="fileTitle">提交时间：</span>
            <span class="fileContent">{{commitTime}}</span>
          </div>
          <div>
            <span class="fileTitle">文件大小：</span>
            <span class="fileContent">{{fileSize}}</span>
          </div>
          <div>
            <span class="fileTitle">模型版本：</span>
            <span class="fileContent">{{version2}}</span>
          </div>
          <div><el-button type="text" style="width:100%;line-height:1.5rem;padding: 2px;border: 1px solid black;color: green;" @click="handle3" :disabled="percentage!==100">浏览</el-button></div>
        </div>
      </div>
    </div>
    <el-dialog
        :visible="versionDialogVisible"
        width="600px"
        :before-close="handleClose1"
        title="历史版本">
      <el-table
          :data="versionHistory"
          style="width: 100%">
        <el-table-column
            prop="version"
            label="版本"
            width="150">
        </el-table-column>
        <el-table-column
            prop="time"
            label="时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="data"
            label="数据量"
            width="150">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="select(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
        :visible="commitHistoryVisible"
        width="760px"
        :before-close="handleClose2"
        title="历史提交">
      <el-table
          :data="commitHistory"
          style="width: 100%">
        <el-table-column
            prop="file"
            label="文件名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="commitTime"
            label="时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="fileSize"
            label="文件大小"
            width="150">
        </el-table-column>
        <el-table-column
            prop="version"
            label="模型版本"
            width="150">
        </el-table-column>
        <el-table-column
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="select2(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
        :visible="fileLookVisible"
        width="760px"
        :before-close="handleClose3"
        title="文件浏览">
      <textarea class="look" readonly="readonly" v-model="fileText"></textarea>
    </el-dialog>
    <el-dialog
        :visible="infoVisible"
        width="760px"
        :before-close="handleClose4"
        title="客户端信息">
      <el-form :model="form" label-width="100px">
        <el-form-item label="客户端名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input v-model="form.ip"></el-input>
        </el-form-item>
        <el-form-item label="端口号">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="训练次数">
          <el-input v-model="form.time" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import Encryption from '../assets/encryption.txt';
// import Result from '../assets/test.txt';
export default {
  name: "FL",
  data(){
    return {
      title:'中国人寿',
      state:'待机中',
      percentage: 0,
      textarea: '',
      cpu: '7%',
      ram: '4%',
      gpu: '0%',
      disk: '2%',
      version: 'v1.3',
      time: '2021/6/14',
      data: '16.3G',
      file: '23iojs2d9ejff.fl',
      commitTime:'2021/6/14',
      fileSize: '233kb',
      version2: 'v1.3',
      versionDialogVisible:false,
      commitHistoryVisible:false,
      fileLookVisible:false,
      infoVisible:false,
      fileText:'',
      textList:[],
      flag:0,
      form:{name:'苏州市公安局',ip:'10.199.228.220',number:'80',time:'23'},
      form2:{},
      versionHistory:[
        {version:'v1.0',time:'2020/12/21',data:'10.1G'},
        {version:'v1.1',time:'2021/1/21',data:'11.1G'},
        {version:'v1.2',time:'2021/2/11',data:'13.1G'},
        {version:'v1.2.1',time:'2021/3/3',data:'12.1G'},
        {version:'v1.3',time:'2021/6/14',data:'16.3G'},
      ],
      commitHistory:[
        {file:'sdiojwe230900.fl',fileSize:'212kb',version:'v1.0',commitTime:'2020/12/21'},
        {file:'8erjhf908ewr9.fl',fileSize:'1998kb',version:'v1.1',commitTime:'2021/1/21'},
        {file:'238878dfuhdfw.fl',fileSize:'234kb',version:'v1.2',commitTime:'2021/2/11'},
        {file:'2389udfkjerfn.fl',fileSize:'265kb',version:'v1.2.1',commitTime:'2021/3/3'},
        {file:'23iojs2d9ejff.fl',fileSize:'233kb',version:'v1.3',commitTime:'2021/6/14'},
      ],
      password:'',
    }
  },
  mounted() {
    this.init();
    this.flag = setInterval(this.check,1000);
  },
  methods:{
    init() {
      this.axios.get('http://localhost:8080/generator/client/3').then((response)=>{
        console.log(response);
        this.form2 = response.data.data;
        this.form.ip = response.data.data.ip;
        this.form.name = response.data.data.name;
        this.form.number = response.data.data.port;
        this.form.time = response.data.data.trainNum;
      })
      this.textList = ['redis home in /redis3.0/redis-3.0.2/src, server is localhost, port is 6379\n' + 'OK\n',
        'Epoch=0, Step=0, batch_cost=0.0389 s, Loss=[array([[     51484541821392],\n' +
        '       [2590716717399643204]])],\n' +
        'Epoch=0, Step=5, batch_cost=0.0371 s, Loss=[array([[      -5797691979063],\n' +
        '       [-9184868781785247333]])],\n' +
        'Epoch=0, Step=10, batch_cost=0.0272 s, Loss=[array([[     -40994917252962],\n' +
        '       [-7036650966324006435]])],\n' +
        'Epoch=0, Step=15, batch_cost=0.0138 s, Loss=[array([[     -1680529178134],\n' +
        '       [4092036215045385658]])],\n' +
        'Epoch=0, Step=20, batch_cost=0.0162 s, Loss=[array([[    -33050853967749],\n' +
        '       [5441620126503787296]])],',
        'Epoch=0, Step=25, batch_cost=0.0146 s, Loss=[array([[      -9135526776653],\n' +
        '       [-4812939328144537826]])],\n' +
        'Epoch=0, Step=30, batch_cost=0.0441 s, Loss=[array([[      25561700946725],\n' +
        '       [-5108782053165926278]])],\n' +
        'Epoch=0, Step=35, batch_cost=0.0264 s, Loss=[array([[       6966763285813],\n' +
        '       [-7055529584381202237]])],',
        'Mpc Training of Epoch=0 Batch_size=10, epoch_cost=1.5795 s',
        'Epoch=1, Step=0, batch_cost=0.0710 s, Loss=[array([[     -10833932143721],\n' +
        '       [-8920979208570679935]])],\n' +
        'Epoch=1, Step=5, batch_cost=0.0246 s, Loss=[array([[      9175032464196],\n' +
        '       [-822820686000043275]])],\n' +
        'Epoch=1, Step=10, batch_cost=0.0243 s, Loss=[array([[      4950318728515],\n' +
        '       [7320323416278432343]])],\n' +
        'Epoch=1, Step=15, batch_cost=0.0217 s, Loss=[array([[     35200955776244],\n' +
        '       [3403786543378848280]])],',
        'Epoch=1, Step=20, batch_cost=0.0352 s, Loss=[array([[     20371941014392],\n' +
        '       [3999758360562900344]])],\n' +
        'Epoch=1, Step=25, batch_cost=0.0345 s, Loss=[array([[     56435458271560],\n' +
        '       [2557687475072916697]])],\n' +
        'Epoch=1, Step=30, batch_cost=0.0189 s, Loss=[array([[      11212106017268],\n' +
        '       [-8856171972147459037]])],\n' +
        'Epoch=1, Step=35, batch_cost=0.0168 s, Loss=[array([[     -7483665249256],\n' +
        '       [2835794910654544175]])],',
        'Mpc Training of Epoch=1 Batch_size=10, epoch_cost=1.4632 s',
        'Epoch=2, Step=0, batch_cost=0.0763 s, Loss=[array([[      1003418794210],\n' +
        '       [8551574594708274708]])],\n' +
        'Epoch=2, Step=5, batch_cost=0.0356 s, Loss=[array([[     38833984463142],\n' +
        '       [6471784204406862421]])],\n' +
        'Epoch=2, Step=10, batch_cost=0.0325 s, Loss=[array([[     12845409738715],\n' +
        '       [4832906216054111104]])],\n' +
        'Epoch=2, Step=15, batch_cost=0.0142 s, Loss=[array([[    -16921479284620],\n' +
        '       [3938294334563554294]])],',
        'Epoch=2, Step=20, batch_cost=0.0428 s, Loss=[array([[      26219476223086],\n' +
        '       [-3079237030171256270]])],\n' +
        'Epoch=2, Step=25, batch_cost=0.0327 s, Loss=[array([[     -30295169777154],\n' +
        '       [-4154916610793553899]])],\n' +
        'Epoch=2, Step=30, batch_cost=0.0230 s, Loss=[array([[       9971458568104],\n' +
        '       [-7887031181126225115]])],\n' +
        'Epoch=2, Step=35, batch_cost=0.0261 s, Loss=[array([[     26227155909159],\n' +
        '       [5028190685894808261]])],',
        'Mpc Training of Epoch=2 Batch_size=10, epoch_cost=1.4376 s',
        'Epoch=3, Step=0, batch_cost=0.0444 s, Loss=[array([[      26920636093262],\n' +
        '       [-4324554917320268424]])],\n' +
        'Epoch=3, Step=5, batch_cost=0.0224 s, Loss=[array([[       6935914144201],\n' +
        '       [-5403424171229126926]])],\n' +
        'Epoch=3, Step=10, batch_cost=0.0255 s, Loss=[array([[     -4832543894249],\n' +
        '       [5337427837061600720]])],\n' +
        'Epoch=3, Step=15, batch_cost=0.0163 s, Loss=[array([[     -36135036198104],\n' +
        '       [-5629006720342564850]])],\n' +
        'Epoch=3, Step=20, batch_cost=0.0181 s, Loss=[array([[    -36728768753130],\n' +
        '       [8069008210556349266]])],\n' +
        'Epoch=3, Step=25, batch_cost=0.0226 s, Loss=[array([[     18524986471639],\n' +
        '       [2128973428305780275]])],\n' +
        'Epoch=3, Step=30, batch_cost=0.0310 s, Loss=[array([[     35448455060534],\n' +
        '       [7725616155433327395]])],\n' +
        'Epoch=3, Step=35, batch_cost=0.0278 s, Loss=[array([[      18514068143497],\n' +
        '       [-1769453566943013011]])],\n' +
        'Mpc Training of Epoch=3 Batch_size=10, epoch_cost=1.4044 s',
        'Epoch=4, Step=0, batch_cost=0.0670 s, Loss=[array([[      -4664362847445],\n' +
        '       [-1617062639159848829]])],\n' +
        'Epoch=4, Step=5, batch_cost=0.0176 s, Loss=[array([[     -4405533536843],\n' +
        '       [7755101770239514471]])],\n' +
        'Epoch=4, Step=10, batch_cost=0.0273 s, Loss=[array([[     -21991952541824],\n' +
        '       [-8352078310186925643]])],\n' +
        'Epoch=4, Step=15, batch_cost=0.0308 s, Loss=[array([[       3074606268742],\n' +
        '       [-6095173556213807483]])],\n' +
        'Epoch=4, Step=20, batch_cost=0.0279 s, Loss=[array([[    -19331822345229],\n' +
        '       [7479955776650577524]])],\n' +
        'Epoch=4, Step=25, batch_cost=0.0284 s, Loss=[array([[    -57345424209039],\n' +
        '       [5926287521175081460]])],\n' +
        'Epoch=4, Step=30, batch_cost=0.0160 s, Loss=[array([[     62220769275809],\n' +
        '       [-575067260221155541]])],\n' +
        'Epoch=4, Step=35, batch_cost=0.0281 s, Loss=[array([[     23688243502907],\n' +
        '       [5013861929549736784]])],\n' +
        'Mpc Training of Epoch=4 Batch_size=10, epoch_cost=1.3456 s',
        'Epoch=5, Step=0, batch_cost=0.0509 s, Loss=[array([[     22619016030226],\n' +
        '       [3321985619095024174]])],\n' +
        'Epoch=5, Step=5, batch_cost=0.0319 s, Loss=[array([[     -17197944142596],\n' +
        '       [-6914870549610129505]])],\n' +
        'Epoch=5, Step=10, batch_cost=0.0158 s, Loss=[array([[    -18584077017158],\n' +
        '       [4141614141392591473]])],\n' +
        'Epoch=5, Step=15, batch_cost=0.0225 s, Loss=[array([[      27531178615369],\n' +
        '       [-2336110809009663775]])],\n' +
        'Epoch=5, Step=20, batch_cost=0.0164 s, Loss=[array([[     1474374789441],\n' +
        '       [636309909509940586]])],\n' +
        'Epoch=5, Step=25, batch_cost=0.0330 s, Loss=[array([[      13878165827257],\n' +
        '       [-3175040038561083135]])],\n' +
        'Epoch=5, Step=30, batch_cost=0.0332 s, Loss=[array([[     -16590375711608],\n' +
        '       [-4981863045239324800]])],\n' +
        'Epoch=5, Step=35, batch_cost=0.0385 s, Loss=[array([[     -13622409494436],\n' +
        '       [-6096195998598651514]])],\n' +
        'Mpc Training of Epoch=5 Batch_size=10, epoch_cost=1.3140 s',
        'Epoch=6, Step=0, batch_cost=0.0746 s, Loss=[array([[    -17536487768945],\n' +
        '       [7702734795618390104]])],\n' +
        'Epoch=6, Step=5, batch_cost=0.0367 s, Loss=[array([[     24065308092856],\n' +
        '       [4323156606339220860]])],\n' +
        'Epoch=6, Step=10, batch_cost=0.0234 s, Loss=[array([[    -14103721652024],\n' +
        '       [8428297968574768216]])],\n' +
        'Epoch=6, Step=15, batch_cost=0.0234 s, Loss=[array([[      15456729105219],\n' +
        '       [-5391694601362341362]])],\n' +
        'Epoch=6, Step=20, batch_cost=0.0261 s, Loss=[array([[     16118429651288],\n' +
        '       [-138421302672735518]])],\n' +
        'Epoch=6, Step=25, batch_cost=0.0254 s, Loss=[array([[     -18219888560987],\n' +
        '       [-2822471374277079715]])],\n' +
        'Epoch=6, Step=30, batch_cost=0.0315 s, Loss=[array([[     25122835290545],\n' +
        '       [3195633431204552710]])],\n' +
        'Epoch=6, Step=35, batch_cost=0.0325 s, Loss=[array([[    55164171842985],\n' +
        '       [-57550992207632519]])],\n' +
        'Mpc Training of Epoch=6 Batch_size=10, epoch_cost=1.4268 s\n' +
        'Epoch=7, Step=0, batch_cost=0.0591 s, Loss=[array([[    -23722067153843],\n' +
        '       [-963285326779657868]])],\n' +
        'Epoch=7, Step=5, batch_cost=0.0316 s, Loss=[array([[     -43187406035014],\n' +
        '       [-2185686075444680508]])],\n' +
        'Epoch=7, Step=10, batch_cost=0.0436 s, Loss=[array([[      5842384418022],\n' +
        '       [7443970227199712191]])],\n' +
        'Epoch=7, Step=15, batch_cost=0.0174 s, Loss=[array([[     -26029042613888],\n' +
        '       [-5719779197913726558]])],\n' +
        'Epoch=7, Step=20, batch_cost=0.0242 s, Loss=[array([[      1980086553287],\n' +
        '       [2597028795414510400]])],\n' +
        'Epoch=7, Step=25, batch_cost=0.0308 s, Loss=[array([[     -4660641653807],\n' +
        '       [6816529608997925355]])],\n' +
        'Epoch=7, Step=30, batch_cost=0.0159 s, Loss=[array([[     -14662445056054],\n' +
        '       [-7497313497232987653]])],\n' +
        'Epoch=7, Step=35, batch_cost=0.0291 s, Loss=[array([[      15269853061339],\n' +
        '       [-8709116413984271195]])],\n' +
        'Mpc Training of Epoch=7 Batch_size=10, epoch_cost=1.3135 s',
        'Epoch=8, Step=0, batch_cost=0.0609 s, Loss=[array([[    -10659485502403],\n' +
        '       [1658446321482323830]])],\n' +
        'Epoch=8, Step=5, batch_cost=0.0225 s, Loss=[array([[     55626911928101],\n' +
        '       [1578036689372540320]])],\n' +
        'Epoch=8, Step=10, batch_cost=0.0359 s, Loss=[array([[     -15633158914246],\n' +
        '       [-1354806375024236440]])],\n' +
        'Epoch=8, Step=15, batch_cost=0.0300 s, Loss=[array([[      -3068770433317],\n' +
        '       [-9083774948023456011]])],\n' +
        'Epoch=8, Step=20, batch_cost=0.0196 s, Loss=[array([[     -2113018282748],\n' +
        '       [1262890440349818795]])],\n' +
        'Epoch=8, Step=25, batch_cost=0.0286 s, Loss=[array([[     -15844857904669],\n' +
        '       [-5156678119426312732]])],\n' +
        'Epoch=8, Step=30, batch_cost=0.0222 s, Loss=[array([[      -2214561159718],\n' +
        '       [-3680099914766992011]])],\n' +
        'Epoch=8, Step=35, batch_cost=0.0230 s, Loss=[array([[     -17036422908016],\n' +
        '       [-1659396836380687089]])],\n' +
        'Mpc Training of Epoch=8 Batch_size=10, epoch_cost=1.3367 s\n' +
        'Epoch=9, Step=0, batch_cost=0.0638 s, Loss=[array([[      16448029901738],\n' +
        '       [-7290596011865471368]])],\n' +
        'Epoch=9, Step=5, batch_cost=0.0752 s, Loss=[array([[     -36343062646192],\n' +
        '       [-3273716745827060803]])],\n' +
        'Epoch=9, Step=10, batch_cost=0.0258 s, Loss=[array([[   -14943888101112],\n' +
        '       [146870527732026956]])],\n' +
        'Epoch=9, Step=15, batch_cost=0.0241 s, Loss=[array([[      15073771611861],\n' +
        '       [-8954992579218025420]])],\n' +
        'Epoch=9, Step=20, batch_cost=0.0194 s, Loss=[array([[      9696862605282],\n' +
        '       [1081436797738831355]])],\n' +
        'Epoch=9, Step=25, batch_cost=0.0319 s, Loss=[array([[       5554487388573],\n' +
        '       [-8914719511749292323]])],\n' +
        'Epoch=9, Step=30, batch_cost=0.0222 s, Loss=[array([[      51495109575292],\n' +
        '       [-7303517930629477155]])],\n' +
        'Epoch=9, Step=35, batch_cost=0.0300 s, Loss=[array([[      19787784510757],\n' +
        '       [-5910071276586822317]])],\n' +
        'Mpc Training of Epoch=9 Batch_size=10, epoch_cost=1.5332 s\n' +
        'Epoch=10, Step=0, batch_cost=0.0698 s, Loss=[array([[     49028439459548],\n' +
        '       [7237738389267335141]])],\n' +
        'Epoch=10, Step=5, batch_cost=0.0363 s, Loss=[array([[    12909974045189],\n' +
        '       [276501507408339794]])],\n' +
        'Epoch=10, Step=10, batch_cost=0.0301 s, Loss=[array([[      37115627460402],\n' +
        '       [-8638382676484669573]])],\n' +
        'Epoch=10, Step=15, batch_cost=0.0239 s, Loss=[array([[    -23071380510585],\n' +
        '       [5124450314348193307]])],\n' +
        'Epoch=10, Step=20, batch_cost=0.0346 s, Loss=[array([[      5780001280244],\n' +
        '       [6648998106099013850]])],\n' +
        'Epoch=10, Step=25, batch_cost=0.0268 s, Loss=[array([[      39007153262122],\n' +
        '       [-4624017037043093056]])],\n' +
        'Epoch=10, Step=30, batch_cost=0.0254 s, Loss=[array([[      20337903212830],\n' +
        '       [-3010988772787894703]])],\n' +
        'Epoch=10, Step=35, batch_cost=0.0265 s, Loss=[array([[      20827055769998],\n' +
        '       [-3952074239797423771]])],\n' +
        'Mpc Training of Epoch=10 Batch_size=10, epoch_cost=1.4032 s',
        'Epoch=11, Step=0, batch_cost=0.0668 s, Loss=[array([[    -26273157701154],\n' +
        '       [3412844221426396155]])],\n' +
        'Epoch=11, Step=5, batch_cost=0.0320 s, Loss=[array([[      19514190128450],\n' +
        '       [-4894974075400722278]])],\n' +
        'Epoch=11, Step=10, batch_cost=0.0329 s, Loss=[array([[     -2856633391369],\n' +
        '       [1571205658790782080]])],\n' +
        'Epoch=11, Step=15, batch_cost=0.0272 s, Loss=[array([[    -51008223032803],\n' +
        '       [8883331476289620612]])],\n' +
        'Epoch=11, Step=20, batch_cost=0.0336 s, Loss=[array([[     -5231469722006],\n' +
        '       [2438788297408833909]])],\n' +
        'Epoch=11, Step=25, batch_cost=0.0147 s, Loss=[array([[     39996966600872],\n' +
        '       [5830811814298664683]])],\n' +
        'Epoch=11, Step=30, batch_cost=0.0181 s, Loss=[array([[      -3781894870935],\n' +
        '       [-7634777882831066756]])],\n' +
        'Epoch=11, Step=35, batch_cost=0.0179 s, Loss=[array([[    -17510324514734],\n' +
        '       [1230536715614770412]])],\n' +
        'Mpc Training of Epoch=11 Batch_size=10, epoch_cost=1.4218 s\n' +
        'Epoch=12, Step=0, batch_cost=0.0523 s, Loss=[array([[     -6417408915738],\n' +
        '       [2104916658449640326]])],\n' +
        'Epoch=12, Step=5, batch_cost=0.0269 s, Loss=[array([[     -21010081380558],\n' +
        '       [-5107482807906451962]])],\n' +
        'Epoch=12, Step=10, batch_cost=0.0288 s, Loss=[array([[     -26981919674141],\n' +
        '       [-3911686023976074420]])],\n' +
        'Epoch=12, Step=15, batch_cost=0.0147 s, Loss=[array([[    -28535330525721],\n' +
        '       [7931422651307876975]])],\n' +
        'Epoch=12, Step=20, batch_cost=0.0232 s, Loss=[array([[       1621982728079],\n' +
        '       [-7725955785028304933]])],\n' +
        'Epoch=12, Step=25, batch_cost=0.0315 s, Loss=[array([[    -57533908603590],\n' +
        '       [8507586672364601226]])],\n' +
        'Epoch=12, Step=30, batch_cost=0.0307 s, Loss=[array([[     -1014964127231],\n' +
        '       [3342950999160721976]])],\n' +
        'Epoch=12, Step=35, batch_cost=0.0344 s, Loss=[array([[   -13138171100166],\n' +
        '       [122214235520241485]])],\n' +
        'Mpc Training of Epoch=12 Batch_size=10, epoch_cost=1.5359 s\n' +
        'Epoch=13, Step=0, batch_cost=0.0207 s, Loss=[array([[      -9269980079666],\n' +
        '       [-5508481755852818072]])],\n' +
        'Epoch=13, Step=5, batch_cost=0.0313 s, Loss=[array([[    -11749841728179],\n' +
        '       [7435086619282088304]])],\n' +
        'Epoch=13, Step=10, batch_cost=0.0166 s, Loss=[array([[      -2780794876008],\n' +
        '       [-5682915934229626343]])],',
        'Epoch=13, Step=15, batch_cost=0.0311 s, Loss=[array([[      3114940848422],\n' +
        '       [6322541612141733811]])],\n' +
        'Epoch=13, Step=20, batch_cost=0.0230 s, Loss=[array([[     31643218605855],\n' +
        '       [1891589549912235560]])],\n' +
        'Epoch=13, Step=25, batch_cost=0.0243 s, Loss=[array([[    -23871535547683],\n' +
        '       [-173792575291251233]])],\n' +
        'Epoch=13, Step=30, batch_cost=0.0195 s, Loss=[array([[      8014901815834],\n' +
        '       [3825536943661557566]])],\n' +
        'Epoch=13, Step=35, batch_cost=0.0365 s, Loss=[array([[   -30200730921255],\n' +
        '       [-89750777366346598]])],\n' +
        'Mpc Training of Epoch=13 Batch_size=10, epoch_cost=1.3728 s\n' +
        'Epoch=14, Step=0, batch_cost=0.0430 s, Loss=[array([[    -19495645335216],\n' +
        '       [7522858364130642599]])],\n' +
        'Epoch=14, Step=5, batch_cost=0.0218 s, Loss=[array([[     -73462548743011],\n' +
        '       [-3338820582812774958]])],\n' +
        'Epoch=14, Step=10, batch_cost=0.0187 s, Loss=[array([[    -39603865414432],\n' +
        '       [6021825902617323061]])],\n' +
        'Epoch=14, Step=15, batch_cost=0.0159 s, Loss=[array([[    -23185499877916],\n' +
        '       [5660478639335276133]])],\n' +
        'Epoch=14, Step=20, batch_cost=0.0275 s, Loss=[array([[    -24284413894765],\n' +
        '       [1458587728521539185]])],\n' +
        'Epoch=14, Step=25, batch_cost=0.0257 s, Loss=[array([[    -28523869355739],\n' +
        '       [1291032217994992218]])],\n' +
        'Epoch=14, Step=30, batch_cost=0.0252 s, Loss=[array([[     -4967519463418],\n' +
        '       [7803530874648671677]])],\n' +
        'Epoch=14, Step=35, batch_cost=0.0396 s, Loss=[array([[      14367125835349],\n' +
        '       [-3025299480059364295]])],\n' +
        'Mpc Training of Epoch=14 Batch_size=10, epoch_cost=1.4044 s\n' +
        'Epoch=15, Step=0, batch_cost=0.0417 s, Loss=[array([[      -8855186792815],\n' +
        '       [-2648747050358629397]])],\n' +
        'Epoch=15, Step=5, batch_cost=0.0246 s, Loss=[array([[      -8526992471137],\n' +
        '       [-5137886538463568023]])],\n' +
        'Epoch=15, Step=10, batch_cost=0.0184 s, Loss=[array([[     -2534104796461],\n' +
        '       [1413645680012316840]])],\n' +
        'Epoch=15, Step=15, batch_cost=0.0270 s, Loss=[array([[     11880792251858],\n' +
        '       [7967264316030817736]])],',
        'Epoch=15, Step=20, batch_cost=0.0206 s, Loss=[array([[    -68188528732425],\n' +
        '       [7720495939437584515]])],\n' +
        'Epoch=15, Step=25, batch_cost=0.0311 s, Loss=[array([[      16920421079700],\n' +
        '       [-1189854494385138318]])],\n' +
        'Epoch=15, Step=30, batch_cost=0.0334 s, Loss=[array([[    -19702532487261],\n' +
        '       [8505690601318030383]])],\n' +
        'Epoch=15, Step=35, batch_cost=0.0220 s, Loss=[array([[    -11694534286427],\n' +
        '       [9078118659770640930]])],\n' +
        'Mpc Training of Epoch=15 Batch_size=10, epoch_cost=1.3411 s\n' +
        'Epoch=16, Step=0, batch_cost=0.0194 s, Loss=[array([[      22880941222067],\n' +
        '       [-2668195729584399957]])],\n' +
        'Epoch=16, Step=5, batch_cost=0.0155 s, Loss=[array([[     -30267186508240],\n' +
        '       [-1082340570580536928]])],\n' +
        'Epoch=16, Step=10, batch_cost=0.0361 s, Loss=[array([[     15351516875498],\n' +
        '       [7508299657670357073]])],\n' +
        'Epoch=16, Step=15, batch_cost=0.0198 s, Loss=[array([[      -7250699517648],\n' +
        '       [-4989433143927738768]])],\n' +
        'Epoch=16, Step=20, batch_cost=0.0164 s, Loss=[array([[      -322967701034],\n' +
        '       [9026102077496949501]])],\n' +
        'Epoch=16, Step=25, batch_cost=0.0361 s, Loss=[array([[     -5471879070660],\n' +
        '       [2310261851671654781]])],\n' +
        'Epoch=16, Step=30, batch_cost=0.0264 s, Loss=[array([[     -13251879530660],\n' +
        '       [-4774156825692531075]])],\n' +
        'Epoch=16, Step=35, batch_cost=0.0139 s, Loss=[array([[    -29413522083404],\n' +
        '       [1045774748190465740]])],\n' +
        'Mpc Training of Epoch=16 Batch_size=10, epoch_cost=1.3361 s\n' +
        'Epoch=17, Step=0, batch_cost=0.0366 s, Loss=[array([[     30997145566455],\n' +
        '       [1600271269400592813]])],\n' +
        'Epoch=17, Step=5, batch_cost=0.0262 s, Loss=[array([[     32066779064703],\n' +
        '       [7268492255100751824]])],\n' +
        'Epoch=17, Step=10, batch_cost=0.0367 s, Loss=[array([[      40840101923940],\n' +
        '       [-5391878832332486315]])],\n' +
        'Epoch=17, Step=15, batch_cost=0.0370 s, Loss=[array([[     40584839895250],\n' +
        '       [1345411940274845551]])],\n' +
        'Epoch=17, Step=20, batch_cost=0.0363 s, Loss=[array([[      11735277618500],\n' +
        '       [-8541145571937638247]])],',
        'Epoch=17, Step=25, batch_cost=0.0274 s, Loss=[array([[     -18106118769355],\n' +
        '       [-4338503453310390068]])],\n' +
        'Epoch=17, Step=30, batch_cost=0.0183 s, Loss=[array([[     13261679789800],\n' +
        '       [7674490775973375712]])],\n' +
        'Epoch=17, Step=35, batch_cost=0.0248 s, Loss=[array([[    -19422688349546],\n' +
        '       [8350390360059812077]])],\n' +
        'Mpc Training of Epoch=17 Batch_size=10, epoch_cost=1.4468 s\n' +
        'Epoch=18, Step=0, batch_cost=0.0564 s, Loss=[array([[    15035937029968],\n' +
        '       [618228101104731481]])],\n' +
        'Epoch=18, Step=5, batch_cost=0.0233 s, Loss=[array([[      -3721732160995],\n' +
        '       [-3808185746717169987]])],\n' +
        'Epoch=18, Step=10, batch_cost=0.0341 s, Loss=[array([[       2082582520257],\n' +
        '       [-3765112990648359575]])],\n' +
        'Epoch=18, Step=15, batch_cost=0.0238 s, Loss=[array([[      29343806231723],\n' +
        '       [-3070836117370659579]])],\n' +
        'Epoch=18, Step=20, batch_cost=0.0213 s, Loss=[array([[     20845061313440],\n' +
        '       [1201640299242060407]])],\n' +
        'Epoch=18, Step=25, batch_cost=0.0157 s, Loss=[array([[      8931220681456],\n' +
        '       [6610666883828190429]])],\n' +
        'Epoch=18, Step=30, batch_cost=0.0372 s, Loss=[array([[     2633483608219],\n' +
        '       [873829946470918200]])],\n' +
        'Epoch=18, Step=35, batch_cost=0.0341 s, Loss=[array([[       9742895383901],\n' +
        '       [-2704471976389753263]])],\n' +
        'Mpc Training of Epoch=18 Batch_size=10, epoch_cost=1.4993 s\n' +
        'Epoch=19, Step=0, batch_cost=0.0472 s, Loss=[array([[     -21573200978020],\n' +
        '       [-5187792806103209621]])],\n' +
        'Epoch=19, Step=5, batch_cost=0.0336 s, Loss=[array([[       6987038512813],\n' +
        '       [-2455961610380758665]])],\n' +
        'Epoch=19, Step=10, batch_cost=0.0184 s, Loss=[array([[     -25801403972994],\n' +
        '       [-4446374875649501120]])],\n' +
        'Epoch=19, Step=15, batch_cost=0.0287 s, Loss=[array([[     -11704262528798],\n' +
        '       [-6083236799524990101]])],\n' +
        'Epoch=19, Step=20, batch_cost=0.0370 s, Loss=[array([[     -12096693744544],\n' +
        '       [-1610668090225288664]])],\n' +
        'Epoch=19, Step=25, batch_cost=0.0428 s, Loss=[array([[      49612984010688],\n' +
        '       [-2245809244602943629]])],\n' +
        'Epoch=19, Step=30, batch_cost=0.0237 s, Loss=[array([[    -26452901781592],\n' +
        '       [7050969791273977165]])],\n' +
        'Epoch=19, Step=35, batch_cost=0.0283 s, Loss=[array([[      23322498987855],\n' +
        '       [-1920529988437318462]])],\n' +
        'Mpc Training of Epoch=19 Batch_size=10, epoch_cost=1.4823 s',
        '\n\ndone'
      ]
      this.fileText = '9�����А�d�\n' +
          '7asW��5Pƹ��΄3=���uL��¶�w�sY������/��C�n���Ah��&M�\'�\\��Y\n' +
          '                                                            p ����`��j�K=NO57��W��r�J$��,��=�NX@t��0!�\n' +
          '����$�I���3�Ȃ�ms{j Xn��B��M�ylA~�Ř��}�X�����g7�W��D�ݦ՚�Υ`B��b��ڹ�|<>=�P�n��<$E�J�PPql?�(�����/~�H�wZ���Xt�����C�.��1�=4f���אX�fP`}�$\\�bydĝ�����*��8EB|��]�w����ћ���Q���ԍ��v�:���`�I���cm���-~�[�/O��违��/p�,�$\n' +
          '�����{9���M�ㄼ��<b�[\\>߇�C�Ț���a�,��elV��{��J�7?"�G��L�����!�$��]��\n' +
          '                                                                         5��%�Ds��+CX�N3WI�&s�)�=p��Ѩd��֧%��:���8��\\^3�\'W<Q�(�x��!�׎iM7�l�A��欗��W��5DWH��풬�~[TV�7��.P�T-�(�4�@�Qp���GA�C��2�����=k�g��;�o~1n��[������S6����NO��@���I1�m��f{z�)��5�Y9�xnV�3h��T�9��݅|DMO�+P ��v�����Z���z��P�\n' +
          '                                                                    ���P��3JM��\n' +
          '                                                                               E�D�\'?��7� �<w��G�Zs���29l\n' +
          '                              ��L�2:�uk���h�\n' +
          '                                            ��w:�m+�g>:D^\'h4&-���hW�Q�J�\n' +
          '\n' +
          'D� �Y�!�E�P�¡�r<>��-$��!\'�%GaE��.2\n' +
          '>ds"���o�����M/��J�r����y[�,��L�ʣ����j]_������\n' +
          '                                               �z�8�Ջ��,����=���E#sKϊ��.򘶔�&��3�9!�\n' +
          '�T�|\tW[�1\t_��2b��p$-q�y��Py�������y���S���XJ�+��9E\n' +
          '                                                                ����/�qp������%pi�l�B�Cy�)����Z�seίQ��\'��j����8w\n' +
          '_��>t�        ��+4t���;����0�zJ�˿H�#4l7�딎�\\�9��!m�=&sE�����!�����4��<6�����\n' +
          '        9��}�]�;�z�6�������q�%�"��\n' +
          '���*���\'Ō�e>U�y��t�����d�(Y)�����,\n' +
          '                                    �(��o�J!��L��n+�}/�%S�7��H�$sr�*aUA��j��V��_}@\';14�4K����y�O�\'����Gzs��t���3��Y�%��y�T2�w�Z�;���6f�5���aj�m��\'&�ǖ���n�M�>&gKr�߆U�y|  ���0�3���Y������^����-����0U9E�[%�ϓg%�M�������:���@�Fۆ�_x�.k�C��yl[/}v���6�*t�~������ܝ\n' +
          '                                     5���Z`r(�J{^���~���Y��w\'�Wq�B�+R[�����r��kq}Z���\tEơ���$��&\n' +
          '�\n' +
          '���A��#N���\'�Q��\t��\\Ib�n:;``�d��\n' +
          '                                         ���Y�_�B�`.;�-�RA9=�A�#9kkյ�G�?����M{Q�T�S���\n' +
          '�(��\n' +
          '    S_\n' +
          '      �}�Y�YBy/���R ���O�\n' +
          '�����W��������纅�\'\'���ϝ����e���Sئ�i��\'�ײM�Y%G�<�lA�!m(�r;rʢ�+lbQ,c&������(@3Q����w���|:��\n' +
          '               ��-�^)�&!�uGZ�����I����=C��)�#�\'7�p>;\t�A3Bk�R��w����+\t�L����3jl��C�!E^U�m�c�&߻���z�kN֓��8�M[xJmn��o���05��*3Ļ;���Qk�U/?�=�`��d��)\n' +
          '                                                                               �Q3���̔b�b�`�3����gb���ٔ\n' +
          '                       �u�Y�k7���Z�H��(ڞ��)~w]���h����x�z�?ذN�������N���\n' +
          '����yw�ĻNݱ��#�TMJ`��۳���,Ō��ɡ;f��h�1��T@���K4K\n' +
          '                                                     ��揿\\\n' +
          'i���z��f^��[D�PG~�����#\n' +
          '                        ��.q�C|����sT7����ٌ�)ۥ����y<���"^b2/W ;�u��f���Lp���<~˓S��������)��!\n' +
          '�ƈם�Up}�����Uf�]��.aQ�1��(S;rPв�x���:�����үu\n' +
          '���P�A���wo��)�Moy�*�(`��G�4q5�z����du����/\\��B)����W��ʏC�p�䂤Cu��|�:�(���o�B��Q*��[,wFXq�m��j��ݙ�X�|9K�k�XJ��\tj������( 7\\��ý};b^��WD^~ԑ3+D��{����j#�$����h��kw;j\n' +
          '               �����q����V.�)/�U����5|o�����нj��gCn�������L�M�y��\n' +
          '                                                                        Ĵ�P�|�1\n' +
          '                                                                              ��u�B]T��>�n�]W�m��9��6c������8�L}�F0k!=,Hɣ�V�ci�����-��u��e��G��%�a#�P�V,<��Ol���~���<B���<��]׹)��ޟ/a����h*��o��ӧ��T�[R`GԌ�Vr�˵C/��La����ĦÖ������z�0�%�ѫ���ח������*Q���6�����e*?�^�ό�߱\n' +
          'M�9�~b\n' +
          '      �E�\n' +
          '         �t�Ӗo����Z�\n' +
          'H�v���x�E���_�f��_�q�n���8�ݞ��\'r�*B������kh��Y5Oe۷�6��h��L����M<����+�&���8oq?����u��3κ��\n' +
          '                           ΢�Ɩ��9����HH�vt��B�d��w�K��R�"CZ蔒U���g��iK�I���7����#�1��ҀΕ������/ˮf���\n' +
          '                           1_\\�t�p���=���2�m����{o:�?akxk���WjAO�~�l�9����x��b�����&/�B5�K�!��}�Y�\n' +
          '                        wݦ��M��yĪ\'�!$^�������@VC`�i�^/9I=N��H�b^lMM�Y������fsf�\t�NJ��W�]�����E�}�l�y�\n' +
          '                                        W�e\n' +
          '                                           ��Z�踥`I��8�Dwhq}sk;�T8��D3���nJ}$C�>p���2禣r&Z]}5ç�g9ei�f�\\k����ϕ�JV`���ڷp�4�ޕ�,dZ���@_9��d\n' +
          '�$��Vf+\t��D���t�O����O-%L�᪥�߶��:��a\'�_,�������+Z�?H*q��8;A����)�V��{�\n' +
          '        V�x��itB��H��y���3���z�\t�mq�eکF�hF�o�#���?q�gl�9��)f����B.��>̩���5\t�[�~�Z+��[i��91AtA�h5��G����H���l���1��y�\\Q�sF�����������A��h��ŔWU���&DYY����s�q��eǊw,6䳰\n' +
          '                        ��eqЌ�����g�\n' +
          '                                     ���Ge�{1���2oB3�/��a�ZA ^�M2S���{���}|J��Ϻ��';
    },
    select(row){
      this.version = row.version;
      this.time = row.time;
      this.data = row.data;
      this.versionDialogVisible = false;
    },
    select2(row){
      this.file = row.file;
      this.commitTime = row.commitTime;
      this.fileSize = row.fileSize;
      this.version2 = row.version;
      this.commitHistoryVisible = false;
    },
    run(){
      // console.log(this.textList.length);
      this.percentage =0;
      this.state = '训练中';
      const p = new Promise((resolve) =>{
        for(let i=0;i<20;i++){
          setTimeout(()=>{
            this.percentage += 5;
            this.textarea += this.textList[i];
            let obj = document.getElementById('text');
            obj.scrollTop = obj.scrollHeight;
            this.cpu = parseInt(Math.random()*(33-17+1)+17,10).toString()+'%';
            this.ram = parseInt(Math.random()*(56-32+1)+32,10).toString()+'%';
            this.disk = parseInt(Math.random()*(46-38+1)+38,10).toString()+'%';
            if(i === 19) resolve(1);
          },500*i);
        }
      })
      p.then((value) => {
        this.done();
        this.state = '已完成';
        console.log(value);
      })
    },
    handle1(){
      this.versionDialogVisible = true;
    },
    handle2(){
      this.commitHistoryVisible = true;
    },
    handle3(){
      this.fileLookVisible = true;
    },
    handle4(){
      this.infoVisible = true;
    },
    handleClose1(){
      this.versionDialogVisible = false;
    },
    handleClose2(){
      this.commitHistoryVisible = false;
    },
    handleClose3(){
      this.fileLookVisible = false;
    },
    handleClose4(){
      this.infoVisible = false;
    },
    check(){
      this.axios.get('http://localhost:8080/generator/client/3').then((response)=>{
        if(response.data.data.isStart === '1'){
          this.run();
          window.clearInterval(this.flag);
        }
      })
    },
    done(){
      this.form2.isStart = '0';
      this.axios.put('http://localhost:8080/generator/client',this.form2).then((response)=>{
        if(response.data.code === 200){
          this.$message({
            message: '训练完成！',
            type: 'success'
          });
        }
      })
    },
    onSubmit(){
      this.form2.ip = this.form.ip;
      this.form2.name = this.form.name;
      this.form2.port = this.form.number;
      this.form2.trainNum = this.form.time;
      this.axios.put('http://localhost:8080/generator/client',this.form2).then((response)=>{
        if(response.data.code === 200){
          this.$message({
            message: '更改成功！',
            type: 'success'
          });
          this.infoVisible = false;
        }
      })
    }
  }
}
</script>

<style scoped>
.header{
  display: flex;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: cornflowerblue;
  align-items: baseline;
}
.header span:nth-child(1){
  flex: 0 0 80%;
  text-align: center;
  font-size: 2.5rem;
  letter-spacing: 10px;
  font-weight: bold;
  padding-left: 20%;
  box-sizing: border-box;
}
.header span:nth-child(2){
  flex: 0 0 20%;
  text-align: center;
  color: white;
}
.header span:nth-child(2):hover{
  cursor: pointer;
}

.main{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 10rem 0 10rem;
  justify-content: center;
}
.left{
  flex: 0 0 70%;
  height: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 1rem 5rem 0 5rem;
  box-shadow: rgba(0,0,0,0.1) 0 1px 4px 0;
}
.state{
  width: 100%;
  display: flex;
  flex: 0 0 1;
  margin-bottom: 1rem;
}
.state #tag{
  flex: 0 0 1;
  margin-right: 1rem;
}
.state #progress{
  flex: 0 0 800px;
}
.console{
  flex: 0 1 100%;
  margin-bottom: 1rem;
  resize: none;
  border: 1px solid #c4c6cf;
  outline: none;
  font-size: 1rem;
  background-color: black;
  color: white;
  box-shadow: rgba(0,0,0,0.1) 0 1px 4px 0;
}
.look{
  width: 100%;
  height: 500px;
  resize: none;
  border: 1px solid #c4c6cf;
  outline: none;
  font-size: 1rem;
}
.right{
  display: flex;
  flex-direction: column;
  flex: 0 0 20%;
  margin-left: 2rem;
  box-shadow: rgba(0,0,0,0.1) 0 1px 4px 0;
  box-sizing: border-box;
  padding: 1rem 1rem 0 1rem;
}
.hardware{
  flex: 0 0 1;
  border-bottom: 1px solid #c4c6cf;
  box-sizing: border-box;
  padding: 1rem 1rem 1rem 1rem;
  font-weight: bold;
  font-size: 1rem;
}
.version{
  flex: 0 0 1;
  border-bottom: 1px solid #c4c6cf;
  box-sizing: border-box;
  padding: 1rem;
  font-weight: bold;
  font-size: 1rem;
}
.commit{
  flex: 0 0 1;
  box-sizing: border-box;
  padding: 1rem;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
}
.commit div{
  line-height: 3rem;
}
.fileTitle{
  display:inline-block;
  width: 50%;
}
.fileContent{
  color: green;
  display:inline-block;
  width: 50%;
  /*text-align: center;*/
}
</style>
